/* components/cunzizhankai/index.wxss */
.village {

    // 村子名字信息
    .villageTitle {
        margin-bottom: 20rpx;

        // 村子标题
        .nameTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nameleft {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }

            }

            .shouqi {
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;


                image {
                    margin-left: 10rpx;
                    width: 20rpx;
                    height: 10rpx;
                }
            }

            .zhankai {
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;


                image {
                    margin-left: 10rpx;
                    width: 20rpx;
                    height: 10rpx;
                }
            }
        }

        // 村子内容
        .villageContent {
            margin-top: 12rpx;
            display: flex;
            justify-content: flex-start;

            // 左侧的线
            .lineLeft {
                width: 32rpx;

                .line {
                    width: 0;
                    height: 100%;
                    border-left: 4rpx dotted #AFAFF2;
                    margin: auto;
                }
            }

            // 右侧的内容
            .contentRight {
                width: 658rpx;
                margin-left: 20rpx;

                // 村子地址
                .address {
                    margin-bottom: 20rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    image {
                        width: 14rpx;
                        height: 18rpx;
                    }

                    text {
                        margin-left: 8rpx;
                        font-size: 20rpx;
                        color: #666666;
                    }
                }

                // 导航信息
                .navigation {
                    padding: 20rpx;
                    background-color: rgba(248, 248, 248, 0.7);
                    margin-bottom: 20rpx;
                    border-radius: 8rpx;
                    display: flex;
                    justify-content: space-between;

                    .navigationLeft {
                        .title {
                            font-size: 26rpx;
                        }

                        .iconTime {
                            margin-top: 12rpx;
                            font-size: 20rpx;

                            image {
                                width: 20rpx;
                                height: 18rpx;
                                margin-right: 40rpx;
                            }
                        }
                    }

                    .navigationRight {
                        display: flex;
                        align-items: center;
                        margin-right: 20rpx;

                        image {
                            width: 44rpx;
                            height: 44rpx;
                        }
                    }
                }

                // 注意事项
                .prompt {
                    border-radius: 8rpx;
                    padding: 20rpx;
                    margin-bottom: 60rpx;
                    background-image: linear-gradient(to bottom,
                            rgba(252, 244, 244, 0.7) 0%,
                            #FFFFFF 100%,
                        );

                    .title {
                        color: #CB3232;
                        font-size: 26rpx;
                    }

                    .text {
                        color: rgba(203, 50, 50, 0.7);
                        font-size: 20rpx;
                        margin-top: 16rpx;
                    }
                }
            }

        }

        // 景点名字信息
        .villageAttractionsTitle {
            margin-bottom: 20rpx;

            // 景区标题
            .nameTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 景区内容
            .attractionsContent {
                margin-top: 12rpx;
                display: flex;
                justify-content: flex-start;

                // 左侧的线
                .lineLeft {
                    width: 32rpx;

                    .line {
                        width: 0;
                        height: 100%;
                        border-left: 4rpx dotted #AFAFF2;
                        margin: auto;
                    }
                }

                // 右侧的内容
                .contentRight {
                    width: 658rpx;
                    margin-left: 20rpx;

                    // 景区地址
                    .address {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        image {
                            width: 14rpx;
                            height: 18rpx;
                        }

                        text {
                            margin-left: 8rpx;
                            font-size: 20rpx;
                            color: #666666;
                        }
                    }

                    // 景区图片
                    .attractionsImage {
                        margin-bottom: 20rpx;

                        image {
                            width: 100%;
                            height: 274rpx;
                            border-radius: 8rpx;
                        }

                        text {
                            margin-top: 8rpx;
                            display: inline-block;
                            width: 100%;
                            font-size: 26rpx;
                            color: #D18E2B;
                            // 超出部分: 隐藏
                            overflow: hidden;
                            // 文本不换行
                            white-space: nowrap;
                            // 文本-超出部分: ...
                            text-overflow: ellipsis;
                        }
                    }

                    // 导航信息
                    .navigation {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: space-between;

                        .navigationLeft {
                            .title {
                                font-size: 26rpx;
                            }

                            .iconTime {
                                margin-top: 12rpx;
                                font-size: 20rpx;

                                image {
                                    width: 20rpx;
                                    height: 18rpx;
                                    margin-right: 40rpx;
                                }
                            }
                        }

                        .navigationRight {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;

                            image {
                                width: 44rpx;
                                height: 44rpx;
                            }
                        }
                    }

                    // 注意事项
                    .prompt {
                        border-radius: 8rpx;
                        padding: 20rpx;
                        margin-bottom: 60rpx;
                        background-image: linear-gradient(to bottom,
                                rgba(252, 249, 244, 0.7) 0%,
                                #FFFFFF 100%,
                            );

                        .title {
                            color: #CB8E32;
                            font-size: 26rpx;
                        }

                        .text {
                            color: rgba(203, 142, 50, 0.7);
                            font-size: 20rpx;
                            margin-top: 16rpx;
                        }
                    }
                }

            }
        }

        // 饭店名字信息
        .villageFoodTitle {
            margin-bottom: 20rpx;

            // 景区标题
            .nameTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 饭店内容
            .foodContent {
                margin-top: 12rpx;
                display: flex;
                justify-content: flex-start;

                // 左侧的线
                .lineLeft {
                    width: 32rpx;

                    .line {
                        width: 0;
                        height: 100%;
                        border-left: 4rpx dotted #AFAFF2;
                        margin: auto;
                    }
                }

                // 右侧的内容
                .contentRight {
                    width: 658rpx;
                    margin-left: 20rpx;

                    // 饭店地址
                    .address {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        image {
                            width: 14rpx;
                            height: 18rpx;
                        }

                        text {
                            margin-left: 8rpx;
                            font-size: 20rpx;
                            color: #666666;
                        }
                    }

                    // 导航信息
                    .navigation {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: space-between;

                        .navigationLeft {
                            .title {
                                font-size: 26rpx;
                            }

                            .iconTime {
                                margin-top: 12rpx;
                                font-size: 20rpx;

                                image {
                                    width: 20rpx;
                                    height: 18rpx;
                                    margin-right: 40rpx;
                                }
                            }
                        }

                        .navigationRight {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;

                            image {
                                width: 44rpx;
                                height: 44rpx;
                            }
                        }
                    }

                    // 推荐美食
                    .recommendFood {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;

                        .textTitle {
                            font-size: 26rpx;
                        }

                        .plitFoodContent {
                            height: 140rpx;
                            display: flex;
                            justify-content: flex-start;

                            .food {
                                width: 100rpx;
                                text-align: center;
                                margin: 0 48rpx 0 0;
                                font-size: 20rpx;

                                image {
                                    width: 100rpx;
                                    height: 100rpx;
                                }
                            }
                        }
                    }

                    // 注意事项
                    .prompt {
                        border-radius: 8rpx;
                        padding: 20rpx;
                        margin-bottom: 60rpx;
                        background-image: linear-gradient(to bottom,
                                rgba(245, 244, 252, 0.7) 0%,
                                #FFFFFF 100%,
                            );

                        .title {
                            color: #638FEE;
                            font-size: 26rpx;
                        }

                        .text {
                            color: rgba(99, 143, 238, 0.7);
                            font-size: 20rpx;
                            margin-top: 16rpx;
                        }
                    }
                }

            }
        }

        // 土特产名字信息
        .villageProductTitle {
            margin-bottom: 20rpx;

            // 土特产标题
            .nameTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 土特产内容
            .productContent {
                margin-top: 12rpx;
                display: flex;
                justify-content: flex-start;

                // 左侧的线
                .lineLeft {
                    width: 32rpx;

                    .line {
                        width: 0;
                        height: 100%;
                        border-left: 4rpx dotted #AFAFF2;
                        margin: auto;
                    }
                }

                // 右侧的内容
                .contentRight {
                    width: 658rpx;
                    margin-left: 20rpx;

                    // 土特产地址
                    .address {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        image {
                            width: 14rpx;
                            height: 18rpx;
                        }

                        text {
                            margin-left: 8rpx;
                            font-size: 20rpx;
                            color: #666666;
                        }
                    }

                    // 导航信息
                    .navigation {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: space-between;

                        .navigationLeft {
                            .title {
                                font-size: 26rpx;
                            }

                            .iconTime {
                                margin-top: 12rpx;
                                font-size: 20rpx;

                                image {
                                    width: 20rpx;
                                    height: 18rpx;
                                    margin-right: 40rpx;
                                }
                            }
                        }

                        .navigationRight {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;

                            image {
                                width: 44rpx;
                                height: 44rpx;
                            }
                        }
                    }

                    // 推荐美食
                    .recommendProduct {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;

                        .textTitle {
                            font-size: 26rpx;
                        }

                        .plitProductContent {
                            height: 140rpx;
                            display: flex;
                            justify-content: flex-start;

                            .product {
                                width: 100rpx;
                                text-align: center;
                                margin: 0 48rpx 0 0;
                                font-size: 20rpx;

                                image {
                                    width: 100rpx;
                                    height: 100rpx;
                                }
                            }
                        }
                    }

                    // 注意事项
                    .prompt {
                        border-radius: 8rpx;
                        padding: 20rpx;
                        margin-bottom: 60rpx;
                        background-image: linear-gradient(to bottom,
                                rgba(252, 247, 244, 0.7) 0%,
                                #FFFFFF 100%,
                            );

                        .title {
                            color: #8D765B;
                            font-size: 26rpx;
                        }

                        .text {
                            color: rgba(141, 118, 91, 0.7);
                            font-size: 20rpx;
                            margin-top: 16rpx;
                        }
                    }
                }

            }
        }

        // 民宿名字信息
        .villageHomestayTitle {
            margin-bottom: 20rpx;

            // 民宿标题
            .nameTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 民宿内容
            .homestayContent {
                margin-top: 12rpx;
                display: flex;
                justify-content: flex-start;

                // 左侧的线
                .lineLeft {
                    width: 32rpx;

                    .line {
                        width: 0;
                        height: 100%;
                        border-left: 4rpx dotted #AFAFF2;
                        margin: auto;
                    }
                }

                // 右侧的内容
                .contentRight {
                    width: 658rpx;
                    margin-left: 20rpx;

                    // 民宿地址
                    .address {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        image {
                            width: 14rpx;
                            height: 18rpx;
                        }

                        text {
                            margin-left: 8rpx;
                            font-size: 20rpx;
                            color: #666666;
                        }
                    }

                    // 民宿图片
                    .homestayImage {
                        margin-bottom: 20rpx;

                        image {
                            width: 100%;
                            height: 274rpx;
                            border-radius: 8rpx;
                        }

                        text {
                            margin-top: 8rpx;
                            display: inline-block;
                            width: 100%;
                            font-size: 26rpx;
                            color: #50A1C6;
                            // 超出部分: 隐藏
                            overflow: hidden;
                            // 文本不换行
                            white-space: nowrap;
                            // 文本-超出部分: ...
                            text-overflow: ellipsis;
                        }
                    }

                    // 导航信息
                    .navigation {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: space-between;

                        .navigationLeft {
                            .title {
                                font-size: 26rpx;
                            }

                            .iconTime {
                                margin-top: 12rpx;
                                font-size: 20rpx;

                                image {
                                    width: 20rpx;
                                    height: 18rpx;
                                    margin-right: 40rpx;
                                }
                            }
                        }

                        .navigationRight {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;

                            image {
                                width: 44rpx;
                                height: 44rpx;
                            }
                        }
                    }

                    // 注意事项
                    .prompt {
                        border-radius: 8rpx;
                        padding: 20rpx;
                        margin-bottom: 60rpx;
                        background-image: linear-gradient(to bottom,
                                rgba(244, 251, 252, 0.7) 0%,
                                #FFFFFF 100%,
                            );

                        .title {
                            color: #50A1C6;
                            font-size: 26rpx;
                        }

                        .text {
                            color: rgba(80, 161, 198, 0.7);
                            font-size: 20rpx;
                            margin-top: 16rpx;
                        }
                    }
                }

            }
        }

        // 驿站名字信息
        .villageStageTitle {
            margin-bottom: 20rpx;

            // 景区标题
            .nameTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    font-size: 30rpx;
                    font-weight: bold;
                    margin: 0 20rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            // 驿站内容
            .stageContent {
                margin-top: 12rpx;
                display: flex;
                justify-content: flex-start;

                // 左侧的线
                .lineLeft {
                    width: 32rpx;

                    .line {
                        width: 0;
                        height: 100%;
                        border-left: 4rpx dotted #AFAFF2;
                        margin: auto;
                    }
                }

                // 右侧的内容
                .contentRight {
                    width: 658rpx;
                    margin-left: 20rpx;

                    // 驿站地址
                    .address {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        image {
                            width: 14rpx;
                            height: 18rpx;
                        }

                        text {
                            margin-left: 8rpx;
                            font-size: 20rpx;
                            color: #666666;
                        }
                    }

                    // 导航信息
                    .navigation {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: space-between;

                        .navigationLeft {
                            .title {
                                font-size: 26rpx;
                            }

                            .iconTime {
                                margin-top: 12rpx;
                                font-size: 20rpx;

                                image {
                                    width: 20rpx;
                                    height: 18rpx;
                                    margin-right: 40rpx;
                                }
                            }
                        }

                        .navigationRight {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;

                            image {
                                width: 44rpx;
                                height: 44rpx;
                            }
                        }
                    }

                    // 驿站补给
                    .recommendStage {
                        padding: 20rpx;
                        background-color: rgba(248, 248, 248, 0.7);
                        margin-bottom: 20rpx;
                        border-radius: 8rpx;

                        .textTitle {
                            font-size: 26rpx;
                        }

                        .plitStageContent {
                            height: 140rpx;
                            display: flex;
                            justify-content: flex-start;

                            .stage {
                                width: 100rpx;
                                text-align: center;
                                margin: 0 48rpx 0 0;
                                font-size: 20rpx;

                                image {
                                    width: 100rpx;
                                    height: 100rpx;
                                }
                            }
                        }
                    }

                    // 注意事项
                    .prompt {
                        border-radius: 8rpx;
                        padding: 20rpx;
                        margin-bottom: 60rpx;
                        background-image: linear-gradient(to bottom,
                                rgba(252, 244, 244, 0.7) 0%,
                                #FFFFFF 100%,
                            );

                        .title {
                            color: #CB3232;
                            font-size: 26rpx;
                        }

                        .text {
                            color: rgba(203, 50, 50, 0.7);
                            font-size: 20rpx;
                            margin-top: 16rpx;
                        }
                    }
                }

            }
        }
    }
}